<template>
    <div
        :class="[userData.resultPermiss == 2 ? '' : 'maskDisabled1', contentData.noDataFlg && contentData.Type != 1 ? 'maskDisabled1' : '']">
        <div
            :class="[userData.resultPermiss == 2 ? '' : 'maskDisabled2', contentData.noDataFlg && contentData.Type != 1 ? 'maskDisabled2' : '']">

            <!-- <div :class="userData.resultPermiss == 2 || contentData.addFlg ? '' : 'maskDisabled1'">
        <div class="tabs-cps-view" :class="userData.resultPermiss == 2 || contentData.addFlg ? '' : 'maskDisabled2'"> -->
            <div class="tabs-cps-view">
                <div class="row">
                    <div class="item">
                        <div class="label">
                            {{ $t("message.rightDetailMessage.tab2.label_1") }}
                        </div>
                        <!-- <el-input v-model="value" class="ipt yellow"></el-input> -->
                        <el-date-picker v-model="contentData.nextSsnDate" class="ipt orange date-ipt" type="month"
                            :clearable="false" :format="timeFormat" :value-format="timeFormat" placeholder=" "
                            @change="dateChange">
                        </el-date-picker>
                    </div>
                    <!-- <div class="item">
        <div class="label">{{$t('message.rightDetailMessage.tab2.label_2')}}</div>
        <div class="radio-view">
          <el-radio v-model="radio" label="1">{{$t('message.rightDetailMessage.tab2.label_3')}}</el-radio>
          <el-radio v-model="radio" label="2">{{$t('message.rightDetailMessage.tab2.label_4')}}</el-radio>
        </div>
      </div> -->
                </div>

                <div class="row" style="border-bottom: 1px solid #d9d9d9; margin-bottom: 12px">
                    <div class="item long-item">
                        <div class="label">
                            {{ $t("message.rightDetailMessage.tab2.label_5") }}
                        </div>
                        <el-input v-model="contentData.nextReply" class="ipt long-ipt"
                            @input="contentData.nextReply = $setMaxLength(contentData.nextReply, 60)"></el-input>
                    </div>
                </div>

                <div class="row" v-if="false">
                    <div class="item">
                        <div class="label">
                            {{ $t("message.rightDetailMessage.tab2.label_6") }}
                        </div>
                        <div class="flex-ipt-view">
                            <el-input v-model="contentData.nextPosNo" class="ipt yellow mini-ipt" disabled></el-input>
                            <!-- <el-select
                        v-model="contentData.nextPosName"
                        class="ipt yellow small-ipt"
                        placeholder=" "
                    >
                        <el-option
                            v-for="item in checkLocList"
                            :key="item"
                            :label="item"
                            :value="item"
                        >
                        </el-option>
                    </el-select> -->
                            <el-input v-model="contentData.nextPosName" class="ipt yellow small-ipt" disabled>
                            </el-input>
                        </div>
                    </div>
                    <div class="item">
                        <div class="label">
                            {{ $t("message.rightDetailMessage.tab2.label_7") }}
                        </div>
                        <!-- <el-select
                    v-model="contentData.nextIspSpcCode"
                    class="ipt yellow"
                    placeholder=" "
                >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select> -->
                        <el-input v-model="contentData.nextIspSpcCode" class="ipt yellow" disabled>
                        </el-input>
                    </div>
                </div>

                <div class="row">
                    <div class="item" v-if="false">
                        <div class="label">
                            {{ $t("message.rightDetailMessage.tab2.label_8") }}
                        </div>
                        <!-- <el-select
                    v-model="contentData.nextIspName"
                    class="ipt yellow"
                    placeholder=" "
                >
                    <el-option
                        v-for="item in checkObjectiveList"
                        :key="item.label"
                        :label="item.label"
                        :value="item.label"
                    >
                    </el-option>
                </el-select> -->

                        <el-input v-model="contentData.nextIspName" class="ipt yellow" disabled>
                        </el-input>
                    </div>
                    <div class="item">
                        <div class="label">
                            {{ $t("message.rightDetailMessage.tab2.label_9") }}
                        </div>
                        <el-select v-model="contentData.nextOpnName" class="ipt" placeholder=" ">
                            <el-option v-for="item in exiOpnList" :key="item" :label="item" :value="item">
                            </el-option>
                        </el-select>
                    </div>
                </div>

                <div class="row">
                    <div class="item" v-if="false">
                        <div class="label">
                            {{ $t("message.rightDetailMessage.tab2.label_10") }}
                        </div>
                        <!-- <el-select
                    v-model="contentData.nextIspWayName"
                    class="ipt yellow"
                    placeholder=" "
                >
                    <el-option
                        v-for="item in checkBillList"
                        :key="item"
                        :label="item"
                        :value="item"
                    >
                    </el-option>
                </el-select> -->

                        <el-input v-model="contentData.nextIspWayName" class="ipt yellow" disabled>
                        </el-input>
                    </div>
                    <div class="item">
                        <div class="label">
                            {{ $t("message.rightDetailMessage.tab2.label_11") }}
                        </div>
                        <el-select v-model="contentData.nextOpeTrm" class="ipt" placeholder=" ">
                            <el-option v-for="item in exeTimList" :key="item" :label="item" :value="item">
                            </el-option>
                        </el-select>
                    </div>
                </div>

                <div class="row">
                    <div class="item" v-if="false">
                        <div class="label">
                            {{ $t("message.rightDetailMessage.tab2.label_12") }}
                        </div>
                        <!-- <el-select
                    v-model="contentData.nextCrrName"
                    class="ipt yellow"
                    placeholder=" "
                >
                    <el-option
                        v-for="item in corrSysList"
                        :key="item"
                        :label="item"
                        :value="item"
                    >
                    </el-option>
                </el-select> -->

                        <el-input v-model="contentData.nextCrrName" class="ipt yellow" disabled>
                        </el-input>
                    </div>
                    <div class="item">
                        <div class="label">
                            {{ $t("message.rightDetailMessage.tab2.label_13") }}
                        </div>
                        <el-select v-model="contentData.nextWrkCls" class="ipt" placeholder=" ">
                            <el-option v-for="item in opeWrkList" :key="item" :label="item" :value="item">
                            </el-option>
                        </el-select>
                    </div>
                </div>

                <!-- <div class="row" v-if="$store.state.macType == 2"> -->
                <div class="row" v-if="false">
                    <div class="item">
                        <div class="label">
                            {{ $t("message.rightDetailMessage.tab2.label_14") }}
                        </div>
                        <el-input v-model="contentData.nextProNo" class="ipt yellow" disabled>
                        </el-input>
                        <!-- <el-select
                    v-model="contentData.nextProNo"
                    class="ipt yellow"
                    placeholder=" "
                >
                    <el-option
                        v-for="item in proLineNoList"
                        :key="item"
                        :label="item"
                        :value="item"
                    >
                    </el-option>
                </el-select> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getResOfferDetialEjectData, getOfferDetialCombox } from "@/api/api";
import { deLcalStorage, getLocalStorage } from "@/utils/storage";
import base from '@/utils/base.js';
import _ from 'lodash-es';
export default {
    name: "Tab_2",
    props: {
        tableSelectRow: Object,
    },
    data() {
        return {
            userData: getLocalStorage("userData"),
            value: "",
            radio: "1",
            options: [],
            optionsValue: "",
            textarea: "",
            dateValue: "",

            contentData: {},
            offerComboxData: {},

            // combox
            checkLocList: [],
            distinguish: [],
            checkSurfaceList: [],
            checkObjectiveList: [],
            exiOpnList: [],
            checkBillList: [],
            exeTimList: [],
            opeWrkList: [],
            proLineNoList: [],

            // timeFormat: base.IP.indexOf("eng") == -1 ?  "yyyy-MM" : "MM-yyyy" 
            timeFormat: "yyyy-MM",
            startData: null
        };
    },

    computed: {
        macCodeValue() {
            return this.$store.state.macCode;
        },
    },

    components: {},

    watch: {
        offerComboxData(nVal) {
            this.initDatas();
        },

        tableSelectRow: {
            deep: true,
            immediate: true,
            handler: function (newV, oldV) {
                if (newV != 'listEmpty' && oldV) {
                    this.$store.state.ISP_Info = {};
                    this.getResOfferDetialEjectDataApi();
                } else {
                    this.contentData = this.$store.state.ISP_Info;
                }

            },
        },

        macCodeValue: {
            deep: true,
            handler: function (newV, oldV) {
                this.getResOfferDetialEjectDataApi();
            },
        },

        contentData: {
            deep: true,
            handler: function (newV, oldV) {
                console.log(newV, this.startData)
                this.$store.state.ISP_Info = newV;

                // console.log(_.isEqual(newV, this.startData));
                // if (_.isEqual(newV, this.startData)) {
                //     this.$store.state.isStop.flg = false;
                // } else {
                //     this.$store.state.isStop.flg = true;
                // }
                console.log('目视详细数据对比', newV, this.startData, !_.isEqual(newV, this.startData));

                this.$emit("DataChangeFn", !_.isEqual(newV, this.startData))
            }
        }
    },
    methods: {
        initDatas() {
            // this.offerComboxData
            this.checkLocList = this.offerComboxData.checkLocList;
            this.distinguish = this.offerComboxData.distinguish;
            this.checkSurfaceList = this.offerComboxData.checkSurfaceList;
            this.checkObjectiveList = this.offerComboxData.checkObjectiveList;
            this.exiOpnList = this.offerComboxData.exiOpnList;
            this.checkBillList = this.offerComboxData.checkBillList;
            this.exeTimList = this.offerComboxData.exeTimList;
            this.opeWrkList = this.offerComboxData.opeWrkList;
            this.proLineNoList = this.offerComboxData.proLineNoList;
        },

        getResOfferDetialEjectDataApi() {
            if (!this.isEmptyObject(this.$store.state.ISP_Info)) {
                this.contentData = this.$store.state.ISP_Info;
                return
            }
            if (
                !this.tableSelectRow ||
                !this.$store.state.macCode ||
                !getLocalStorage("userName")
            )
                return;

            let temp = {
                userName: getLocalStorage("userName"),
                dmgCode: this.$store.state.macCode,
                actuNo: Number(this.tableSelectRow.actuNo),
            };

            getResOfferDetialEjectData(temp).then((res) => {

                if (res.data.code == 0 && res.data.data.length > 0) {
                    this.contentData = res.data.data[0];

                    this.startData = _.cloneDeep(this.contentData);


                    // let tempDate = this.contentData.nextSsnDate;
                    // // 年-月
                    // var r0 = tempDate.match(
                    //     /^([0-9]{4}|[0-9]{2})-([0]?[1-9]|[1][0-2])$/
                    // );

                    // // 月-年
                    // var r1 = tempDate.match(
                    //     /^([0]?[1-9]|[1][0-2])-([0-9]{4}|[0-9]{2})$/
                    // );

                    // if (r0 && !r1)
                    //     this.timeFormat = "yyyy-MM";
                    // else if (!r0 && r1)
                    //     this.timeFormat = "MM-yyyy";


                    this.getOfferDetialComboxApi();

                } else {
                    this.contentData = {};
                    this.startData = _.cloneDeep({});
                }
            });
        },

        getOfferDetialComboxApi() {
            let prnCode = 1;
            // for(var i = 0;i<this.checkObjectiveList.length;i++){
            // 	if(this.checkObjectiveList[i] == this.contentData.tCodName){
            // 		prnCode = i;
            // 	}
            // }
            if (
                !this.tableSelectRow ||
                !this.$store.state.macCode ||
                !getLocalStorage("userName")
            )
                return;

            console.log(
                "getOfferDetialComboxApi -=-=-=-=-= getOfferDetialComboxApi -=-=-=-=-=-"
            );
            let temp = {
                pltCode: this.$store.state.pltCode,
                userName: getLocalStorage("userName"),
                macCode: this.$store.state.realMacCode,
                dmgCode: this.$store.state.macCode,
                prnCode
            };
            getOfferDetialCombox(temp).then((res) => {
                this.offerComboxData = res.data.data;
                console.log(
                    "getOfferDetialComboxApi -=-=-=-=-= ",
                    this.offerComboxData
                );
                this.initDatas();
            });
        },

        dateChange(val) {
            console.log(`dateChange(${this.dateValue})`);
            //     this.getResOfferDetialEjectDataApi();
        },

        isEmptyObject(obj) {
            for (var key in obj) {
                return false;
            };
            return true;
        },
    },

    created() { },

    mounted() {
        this.initDatas();
        this.getOfferDetialComboxApi();
    },
    beforeDestroy() {
        this.$store.state.ISP_Info = this.contentData;

    },
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.tabs-cps-view {
    width: 100%;

    .row {
        display: flex;
        justify-content: space-between;
        padding-bottom: 12px;

        .item {
            width: 48%;
            display: flex;
            justify-content: flex-start;

            .label {
                width: 83px;
                display: flex;
                align-items: center;
            }

            .strat-view {
                width: calc(100% - 83px);
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
        }

        .long-item {
            width: 100%;

            .long-ipt {
                width: calc(100% - 89px);

                ::v-deep .el-input__inner {
                    width: 100%;
                    height: 32px;
                }
            }
        }
    }
}

.radio-view {
    width: 238px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ipt {
    width: 238px;
    height: 32px;

    ::v-deep .el-input__inner {
        width: 238px;
        height: 32px;
        color: #606266 !important;
    }

    ::v-deep .el-input__inner:focus {
        border: 1px solid #dcdfe6;
    }

    ::v-deep .el-input__icon {
        line-height: 32px;
        color: #909399;
    }

    ::v-deep .el-input__suffix {
        width: 32px;
        right: 0;
        background: #dee0e3;
    }
}

.small-ipt {
    width: 172px;

    ::v-deep .el-input__inner {
        width: 100%;
        height: 32px;
    }
}

.mini-ipt {
    width: 55px;

    ::v-deep .el-input__inner {
        width: 100%;
        height: 32px;
    }
}

.flex-ipt-view {
    width: 238px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.picker {
    width: 130px;

    ::v-deep .el-input__inner {
        width: 130px;
    }

    ::v-deep .el-input__suffix {
        background: transparent;
    }
}

.orange {
    ::v-deep .el-input__inner {
        background: #ffdeac;
    }
}

.yellow {
    ::v-deep .el-input__inner {
        background: #ffffe1;
    }
}

.textarea {
    ::v-deep .el-textarea__inner {
        resize: none;
        background: #ffffe1;
    }
}

.date-ipt {
    ::v-deep .el-input__suffix {
        background: transparent;
    }
}
</style>
